<!-- ElementUI菜单组件的封装 -->
<!-- 
    <myMenu 
        style='height:100%;' class='fLeft' mstyle='width: 220px;height: 100%;'(菜单menu样式)
        :menus='menus' :menu=' string || "/White" '(激活菜单的索引字符) :only='false'(每次只展开一组)
        bg='#545c64' color='#fff' active='#ffd04b'
        @open='console'
        @close='console'
    ></myMenu>
 -->
<template>
    <div style="display: inline-block;">

        <el-menu
            astyle='width: 220px;height: 100%;'
            :style=' mstyle||"" '
            a:router='true'
            :unique-opened=' only !== false '
            :default-active=" menu||'' "
            @open="$emit('open',arguments[0],arguments[1])"
            @close="$emit('close',arguments[0],arguments[1])"
            :background-color=" bg || '#545c64' "
            :text-color=" color || '#fff' "
            :active-text-color=" active || '#ffd04b' "
            >
            <div v-for="(menu,index) in menus" :key="index">
                <el-submenu v-if='menu.menus' :index=" joinHash( menu.to || ( index + '' ) ) " :show-timeout='150' :hide-timeout='150'>
                    <template slot="title">
                        <img v-if=' menu.icon.includes("/") ' :src=" menu.icon " width='16'>
                        <i v-else :class=" menu.icon "></i>
                        <span>{{ menu.name }}</span>
                    </template>
                    <el-menu-item v-for='(menu2,index2) in menu.menus' :key='index2' :index=" joinHash( menu2.to || ( index + '-' + index2 ) ) " @click.native='goTo(menu2.to)'>
                        <img v-if=' menu2.icon.includes("/") ' :src=" menu2.icon " width='16'>
                        <i v-else :class=" menu2.icon "></i>
                        <span slot="title">{{ menu2.name }}</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index=" joinHash( menu.to || ( index + '' ) ) " @click.native='goTo(menu.to)'>
                    <img v-if=' menu.icon.includes("/") ' :src=" menu.icon " width='16'>
                    <i v-else :class=" menu.icon "></i>
                    <span slot="title">{{ menu.name }}</span>
                </el-menu-item>
            </div>
        </el-menu>

    </div>
</template>

<script>
    // import { Ajax }  from '@/api/myPost.js'
    // import api from '@/api/api.js'
    var dad, $router;
    const hashKeys = G.hashKeys  = { __proto__: null };
    export default {
        ref: false,
        global: false,
        name: 'myMenu',
        props: [ 'menus', 'menu', 'only', 'mstyle', 'bg', 'color', 'active', 'dad','son','dadSon' ],
        data: function () {
            return {
                joinHash(hash){
                    hashKeys[hash] = true;
                    return hash;
                },
                /*menus: [
                    {
                        menus: [ 
                            { name: '选项1', icon: '', to: '/White' }, 
                            { name: '选项2', icon: '', to: '/Login' },
                            { name: '选项3', icon: '', to: '/Index' },
                        ],
                        name: '导航一',
                        icon: 'el-icon-location', (图标字体的类名)
                    },
                    {
                        name: '导航一',
                        icon: '../static/img/1.png', (真实图片地址)
                        to: '',
                    },
                    {
                        name: '导航二',
                        icon: '../static/img/2.png',
                        to: '',
                    },
                    {
                        name: '导航三',
                        icon: '../static/img/3.png',
                        to: '',
                        disabled: true,
                    },
                    {
                        name: '导航四',
                        icon: '../static/img/4.png',
                        // icon: 'el-icon-setting',
                        to: '',
                    },
                ]*/
            }
        },
        watch: {
            
        },
        methods: {
            goTo(to){
                /*if ( to.includes('/') ) {
                    $router.push({ path: to });
                }else {
                    $router.push({ name: to });
                };*/
                // console.warn(to);
                $router.push({ [ to.includes('/') ? 'path' : 'name' ]: to });
            }
        },
        created() {
            dad = this.parseDadSon('myMenu');
            // console.log(this);
            $router = this.$router;
        },
        mounted() {
           
        }

    }
</script>

<style>
    
</style>